<template>
  <div class="enroll">
    <!-- <div style="display: flex; justify-content: center">
      <el-button type="success" :icon="Bell"
        >24年录取数据陆续整理上传中，预计6月份更新完成</el-button
      >
    </div> -->
    <div class="header">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
        <el-tab-pane label="录取名单" :name="1"></el-tab-pane>
        <el-tab-pane label="复试名单" :name="2"></el-tab-pane>
      </el-tabs>
      <el-select
        v-model="selectYear"
        placeholder="选择年份"
        @change="yearChange"
      >
        <el-option
          :label="ele"
          :value="ele"
          :key="ele"
          v-for="ele in yearOptions"
        ></el-option>
      </el-select>
    </div>
    <div class="table mohu" v-if="activeName == 1">
      <el-table
        v-loading="loading"
        stripe
        element-loading-text="数据加载中..."
        empty-text="暂无数据，请重新选择条件查询"
        :data="tableData"
        ref="sortTable"
        :default-sort="{ prop: 'cs', order: '' }"
        style="width: 100%"
      >
        <el-table-column prop="ssnf" label="年份" width="100" />
        <!-- <el-table-column prop="zymc" label="专业名称" /> -->
        <!-- <el-table-column prop="zydm" label="专业代码" width="120" /> -->
        <!-- <el-table-column prop="yjfxnr" label="研究方向" width="180" /> -->
        <el-table-column prop="kmycj" label="政治/综合" width="100" />
        <el-table-column prop="kmecj" label="外语" width="100" />
        <el-table-column prop="kmscj" label="业务课一" width="100" />
        <el-table-column prop="kmsicj" label="业务课二" width="100" />
        <el-table-column prop="xm" label="姓名" />
        <el-table-column prop="yzyxxmc" label="一志愿学校" />
        <el-table-column prop="zcj">
          <template #header>
            <el-space>
              <div>总分</div>
              <el-icon size="16px" color="#F56C6C" style="cursor: pointer;" @click="onTips({text:'部分院校总分按照百分制计算，复试总分每个学校不同，没有统一标准'})"><QuestionFilled /></el-icon>
            </el-space>
          </template>
        </el-table-column>
        <el-table-column prop="cs" label="初试成绩" sortable/>
        <el-table-column prop="fs">
          <template #header>
            <el-space>
              <div>复试成绩</div>
              <el-icon size="16px" color="#F56C6C" style="cursor: pointer;" @click="onTips({text:'部分院校总分按照百分制计算，复试总分每个学校不同，没有统一标准'})"><QuestionFilled /></el-icon>
            </el-space>
          </template>
        </el-table-column>
        <el-table-column prop="zxjh" label="专项计划" />
      </el-table>
      <div v-if="isUnlock" class="mohu-filter">
        <el-button type="success" @click="onUnlock">
          <el-icon class="el-icon--right"><Key /></el-icon> <span>解锁</span>
        </el-button>
      </div>
    </div>
    <div class="table mohu" v-if="activeName == 2">
      <el-table
        v-loading="loading"
        stripe
        element-loading-text="数据加载中..."
        empty-text="暂无数据，请重新选择条件查询"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="ssnf" label="年份" width="100" />
        <el-table-column prop="xm" label="姓名" />
        <!-- <el-table-column prop="lqxxmc" label="复试院校" width="120" />
        <el-table-column prop="xymc" label="复试学院" width="180" />
        <el-table-column prop="zydm" label="专业代码" /> -->
        <el-table-column prop="zymc" label="专业名称" />
        <el-table-column prop="xxfsmc" label="学习方式" />
        <el-table-column prop="yjfxnr" label="研究方向" />
        <el-table-column prop="cs" label="初试成绩" />
        <el-table-column prop="fs" label="复试成绩" />
        <!-- <el-table-column prop="yzyxxmc" label="一志愿院校" /> -->
        <el-table-column
          prop="tag"
          label="录取情况"
          width="100"
          :filters="[
            { text: '已录取', value: '已录取' },
            { text: '未录取', value: '未录取' },
            { text: '未知', value: '未知' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag
              :type="
                scope.row.enrollFlagStr == '已录取'
                  ? 'success'
                  : scope.row.enrollFlagStr == '已录取'
                  ? 'error'
                  : 'info'
              "
              disable-transitions
              >{{ scope.row.enrollFlagStr }}</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
      <div v-if="isUnlock" class="mohu-filter">
        <el-button type="success" @click="onUnlock">
          <el-icon class="el-icon--right"><Key /></el-icon> <span>解锁</span>
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Bell } from "@element-plus/icons-vue";
import { ref, onMounted, defineProps } from "vue";
import { useList, fushiList } from "@/api/api";
import { decrypt } from "@/utils/parseDate";
import { defineEmits } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/theme-chalk/el-message-box.css";
import { useStore } from "vuex";
const store = useStore();
const emit = defineEmits(["onChange"]);
// 将 myMethod 暴露给父组件
defineExpose({ childMethod });
function childMethod() {
  getUseList();
  getFushiList();
}

function onTips(row) {
  ElMessageBox.confirm(row.text, {
    title: "提示",
    type: "warning",
    center: true,
  })
  .then(() => {
    
  })
  .catch(() => {
    
  });
}
const filterTag = (value, row) => {
  return row.enrollFlagStr === value;
};
// 点击tab
const activeName = ref(1);
const handleClick = (event) => {
  console.log(event);
  if (event == 1) {
    getUseList();
  } else if (event == 2) {
    getFushiList();
  }
};
// 点击解锁
function onUnlock() {
  emit("onChange", { isUnlock: true });
}
const tableData = ref([]);
const loading = ref(false);
const props = defineProps({
  majorId: String,
});
// 选择的年份
const selectYear = ref("");
const yearOptions = ref([]);
// 所有数据
const allData = ref([]);
// 是否显示模糊效果
const isUnlock = ref(false);
// 获取录取名单
async function getUseList() {
  try {
    tableData.value = [];
    allData.value = [];
    selectYear.value = "";
    yearOptions.value = [];
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await useList(data);
    const res = JSON.parse(decrypt(result));
    if (res.status == 8) {
      store.commit("setTipsDialog", true);
    }
    if (res.status == 9) {
      store.commit("setNumberDialog", true);
    }
    if (res.status == 666) {
      ElMessage({
        message: res.msg,
        type: "warning",
        showClose: true,
      });
      isUnlock.value = true;
      emit("onChange", { isUnlock: true });
      tableData.value = [
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
      ];
      loading.value = false;
    }
    if (res.status === 0 && res.result.length > 0) {
      const yearList = [...new Set(res.result.map((ele) => ele.ssnf))];
      yearOptions.value = yearList;
      allData.value = res.result;
      selectYear.value = yearList[0];
      tableData.value = res.result.filter((ele) => ele.ssnf == yearList[0]);
      loading.value = false;
      isUnlock.value = false;
    } else {
      tableData.value = [];
      allData.value = [];
      selectYear.value = "";
      yearOptions.value = [];
      selectYear.value = "";
      loading.value = false;
    }
  } catch (error) {
    loading.value = false;
    // throw new Error(error)
  }
}
// 获取复试名单
async function getFushiList() {
  try {
    tableData.value = [];
    allData.value = [];
    selectYear.value = "";
    yearOptions.value = [];
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await fushiList(data);
    const res = JSON.parse(decrypt(result));
    console.log(res, 233);
    if (res.status == 666) {
      ElMessage({
        message: res.msg,
        type: "warning",
        showClose: true,
      });
      isUnlock.value = true;
      emit("onChange", { isUnlock: true });
      tableData.value = [
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
        {
          ssnf: "请解锁查看",
          zymc: "请解锁查看",
          zydm: "请解锁查看",
          yjfxnr: "请解锁查看",
          xm: "请解锁查看",
          yzyxxmc: "请解锁查看",
          zcj: "请解锁查看",
          cs: "请解锁查看",
          fs: "请解锁查看",
        },
      ];
      loading.value = false;
    }
    if (res.status === 0 && res.result.length > 0) {
      const yearList = [...new Set(res.result.map((ele) => ele.ssnf))];
      yearOptions.value = yearList.reverse();
      allData.value = res.result;
      selectYear.value = yearList[0];
      tableData.value = res.result.filter((ele) => ele.ssnf == yearList[0]);
      loading.value = false;
      isUnlock.value = false;
    } else {
      tableData.value = [];
      allData.value = [];
      selectYear.value = "";
      yearOptions.value = [];
      selectYear.value = "";
      loading.value = false;
    }
  } catch (error) {
    loading.value = false;
    // throw new Error(error)
  }
}
// 改变选择年份
const sortTable = ref(null)
function yearChange(val) {
  if (activeName.value == 1) {
    sortTable.value.clearSort();
  }
  selectYear.value = val;
  const res = allData.value.filter((ele) => ele.ssnf == val);
  tableData.value = res;
}
onMounted(() => {
  getUseList();
});
</script>
<style lang="less" scoped>
::v-deep .el-tabs__nav {
  padding-left: 80px;
}
.enroll {
  .header {
    text-align: right;
    .el-select {
      margin-left: 10px;
    }
  }
  .table {
    margin-top: 20px;
  }
}
.mohu {
  position: relative;
  z-index: 9;
}

.mohu-filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
